<template>
  <a-row :gutter="24">
    <a-col :sm="24" :md="24" :xl="8">
      <div class="send-display-container">
        <div class="filter-container">
          <template>
            <div>
              <a-button type="primary" @click="showModal">
                添加机构
              </a-button>
              <a-modal
                title="新建组织机构"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="handleOk"
                @cancel="handleCancel"
              >
                <div style="margin-top: 24px">
                  <a-form-model
                    ref="ruleAddForm"
                    :model="addForm"
                    :rules="addRules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                  >
                    <a-form-model-item ref="groupName" label="机构名称" prop="groupName">
                      <a-input
                        v-model="addForm.groupName"
                        @blur="() => { $refs.groupName.onFieldBlur() }"></a-input>
                    </a-form-model-item>
                    <a-form-model-item label="上级部门" prop="parentName">
                      <a-select v-model="addForm.parentName" disabled placeholder="请选择">
                        <a-select-option value="shanghai">
                          Zone one
                        </a-select-option>
                        <a-select-option value="beijing">
                          Zone two
                        </a-select-option>
                      </a-select>
                    </a-form-model-item>
                    <a-form-model-item ref="organCode" label="机构编码" prop="organCode">
                      <a-input
                        v-model="addForm.organCode"
                        @blur="() => { $refs.organCode.onFieldBlur() }"
                      />
                    </a-form-model-item>
                    <a-form-model-item label="创客星标识" prop="seType">
                      <a-input disabled v-model="addForm.seType" type="text"/>
                    </a-form-model-item>
                    <a-form-model-item label="备注" prop="bz">
                      <a-input v-model="addForm.bz" type="text"/>
                    </a-form-model-item>
                  </a-form-model>
                </div>
              </a-modal>
            </div>
          </template>
          <a-divider type="vertical"/>
          <a-popconfirm
            v-show="checkedKeys.length > 0"
            title="是否删除？"
            ok-text="是"
            cancel-text="否"
            @confirm="onDel( text, record )"
            @cancel="cancelDel"
          >
            <a-button class="btn" type="primary">删除</a-button>
          </a-popconfirm>
          <a-button v-show="checkedKeys.length === 0" @click="onDel( text, record )" class="btn" type="primary">删除</a-button>
        </div>

        <a-back-top/>
        <div>
          <template>
            <a-tree
              v-model="checkedKeys"
              checkable
              checkStrictly
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :selected-keys="selectedKeys"
              :replace-fields="replaceFields"
              :tree-data="treeData"
              @expand="onExpand"
              @check="onCheck"
              @select="onSelect"
            />
          </template>
        </div>
      </div>
    </a-col>
    <a-col :sm="12" :md="24" :xl="16">
      <div class="send-display-container" v-if="displayBasic">
        <page-title title="基本信息"/>
        <div style="margin-top: 24px">
          请先选择一个部门!
        </div>
      </div>
      <div class="send-display-container" v-else>
        <page-title title="基本信息"/>
        <div style="margin-top: 24px">
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item ref="groupName" label="机构名称" prop="groupName">
              <a-input
                v-model="form.groupName"
                @blur="
                  () => {
                    $refs.groupName.onFieldBlur();
                  }
                "
              />
            </a-form-model-item>
            <a-form-model-item label="上级部门" prop="parentName">
              <a-select v-model="form.parentName" disabled placeholder="请选择">
                <a-select-option value="shanghai">
                  Zone one
                </a-select-option>
                <a-select-option value="beijing">
                  Zone two
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item ref="organCode" label="机构编码" prop="organCode">
              <a-input
                v-model="form.organCode"
                @blur="
                  () => {
                    $refs.organCode.onFieldBlur();
                  }
                "
              />
            </a-form-model-item>
            <a-form-model-item label="创客星标识" prop="seType">
              <a-input disabled v-model="form.seType" type="text"/>
            </a-form-model-item>
            <a-form-model-item label="备注" prop="bz">
              <a-input v-model="form.bz" type="text"/>
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button style="margin-left: 10px;" @click="resetForm">
                <a-icon type="sync"/>
                重置
              </a-button>
              <a-divider type="vertical"/>
              <a-button type="primary" @click="onSubmit()">
                <a-icon type="form"/>
                更新
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script>
  import { getTreeData, getGroupInfoById, updateGroupInfo, deleteGroupInfo, saveGroupInfo } from '@/api/rbac'
  export default {
    name: 'Organ',
    data () {
      return {
        // 左侧model
        expandedKeys: [],
        autoExpandParent: true,
        checkedKeys: [],
        selectedKeys: [],
        visible: false,
        confirmLoading: false,
        replaceFields: {
          children: 'children',
          title: 'groupName',
          key: 'groupId'
        },
        displayBasic: true,
        treeData: [],
        // 右侧model
        wrapperCol: { span: 14 },
        labelCol: { span: 4 },
        form: {
          groupName: '',
          parentName: '',
          organCode: '',
          bz: '',
          seType: ''
        },
        addForm: {
          groupName: '',
          parentName: '',
          organCode: '',
          bz: '',
          seType: ''
        },
        rules: {
          groupName: [
            { required: true, message: '请输入机构/部门名称!', trigger: 'blur' }
          ],
          organCode: [
            { required: true, message: '请输入机构编码!', trigger: 'blur' }
          ]
        },
        addRules: {
          groupName: [
            { required: true, message: '请输入机构/部门名称!', trigger: 'blur' }
          ],
          organCode: [
            { required: true, message: '请输入机构编码!', trigger: 'blur' }
          ]
        }
      }
    },
    watch: {
      checkedKeys (val) {
        console.log('onCheck', val)
      }
    },
    created () {
      this.onQuery()
    },
    methods: {
      onQuery () {
        getTreeData().then(res => {
          this.treeData = res.retObj
          this.expandedKeys = [res.retObj[0].groupId]
          if (res.retObj[0].groupId !== undefined && res.retObj[0].groupId != null) {
            this.addForm.parentId = res.retObj[0].groupId
          }
          if (res.retObj[0].groupName !== undefined && res.retObj[0].groupName != null) {
            this.addForm.parentName = res.retObj[0].groupName
          }
        })
      },
      onExpand (expandedKeys) {
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      onCheck (checkedKeys) {
        console.log('checkedKeys', checkedKeys)
        this.checkedKeys = checkedKeys.checked
      },
      onSelect (selectedKeys) {
        this.displayBasic = false
        this.selectedKeys = selectedKeys
        if (this.selectedKeys.length > 0) {
          getGroupInfoById({ 'groupId': selectedKeys[0] }).then(res => {
            this.form = res.retObj
            if (res.retObj === null) {
              this.displayBasic = true
            }
          })
        }
      },
      onDel () {
        if (this.checkedKeys.length === 1) {
          deleteGroupInfo({ 'groupId': this.checkedKeys[0] }).then(res => {
            if (res.retCode === 0) {
              this.form = res.retObj
              this.displayBasic = true
              this.$notification['success']({
                message: '提示',
                description: '删除成功！',
                duration: 8
              })
              this.checkedKeys = []
              this.onQuery()
            } else {
              this.$notification['error']({
                message: '提示',
                description: res.retMsg,
                duration: 8
              })
            }
          })
        } else {
          this.$notification['error']({
            message: '提示',
            description: '只能选中一条数据！',
            duration: 8
          })
        }
      },
      onSubmit () {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            updateGroupInfo(this.form).then(res => {
              if (res.retCode === 0) {
                this.form = res.retObj
                this.displayBasic = true
                this.$notification['success']({
                  message: '提示',
                  description: '信息修改成功！',
                  duration: 8
                })
                this.onQuery()
              } else {
                this.$notification['error']({
                  message: '提示',
                  description: res.retMsg,
                  duration: 8
                })
              }
            })
          } else {
            return false
          }
        })
      },
      cancelDel () {
      },
      onSave () {
        this.$refs.ruleAddForm.validate(valid => {
          if (valid) {
            saveGroupInfo(this.addForm).then(res => {
              if (res.retCode === 0) {
                this.form = res.retObj
                this.displayBasic = true
                this.$notification['success']({
                  message: '提示',
                  description: '机构信息保存成功！',
                  duration: 8
                })
                this.visible = false
                this.onQuery()
              } else {
                this.$notification['error']({
                  message: '提示',
                  description: res.retMsg,
                  duration: 8
                })
              }
            })
          } else {
            return false
          }
        })
      },
      showModal () {
        this.visible = true
        this.addForm = {
            groupName: '',
            parentName: this.addForm.parentName,
            parentId: this.addForm.parentId,
            organCode: '',
            bz: '',
            seType: ''
        }
      },
      handleOk () {
        this.onSave()
      },
      handleCancel () {
        this.visible = false
      },
      resetForm () {
        if (this.selectedKeys.length > 0) {
          getGroupInfoById({ 'groupId': this.selectedKeys[0] }).then(res => {
            this.form = res.retObj
          })
        }
      },
      resetAddForm () {
        this.$refs.ruleAddForm.resetFields()
      }
    }
  }
</script>

<style scoped lang="less">
  .send-display-container {
    width: 100%;
    background-color: #ffffff;
    padding: 24px;
  }

  .filter-container {
    display: flex;
    align-items: center;
    padding-bottom: 24px;
    justify-content: left;

    .label {
      padding-right: 20px;

      white-space: nowrap;
    }

    .input-container {
      width: 300px;
      margin-right: 20px
    }

    .btn {
      margin-right: 20px;
    }
  }
</style>
